<template>
	<view class="home">
		<swiper indicator-dots autoplay :circular="true">
			<swiper-item v-for="item in swipes" :key="item.goods_id"><image :src="item.image_src"></image></swiper-item>
		</swiper>
		<!-- 导航区域-->
		<view class="nav">
			<view class="nav_item" v-for="(item, index) in nav" :key="index" @click="navItemClick(item.page)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
		    <goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
			<view class="isOver" v-if="flag">没有啦</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
export default {
	data() {
		return {
			title: 'Hello',
			swipes: [],
			goods: [],
			pageindex:1,
			flag: false,
			total:0,
			nav: [
				{
					icon: 'iconfont icon-ziyuan',
					title: '黑马超市',
					page: '/pages/goods/goods'
				},
				{
					icon: 'iconfont icon-guanyuwomen',
					title: '联系我们',
					page: '/pages/contact/contact'
				},
				{
					icon: 'iconfont icon-tupian',
					title: '社区图片',
					page: '/pages/pics/pics'
				},
				{
					icon: 'iconfont icon-shipin',
					title: '学习视频',
					page: '/pages/videos/videos'
				}
			]
		};
	},
	onLoad() {
		this.getSwipers();
		this.getHotGoods()
	},
	onPullDownRefresh() {
		console.log("下拉刷新")
		this.pageindex = 1
		this.goods=[]
		this.flag=false
		setTimeout(() => {
			this.getHotGoods(()=>uni.stopPullDownRefresh())
		},1000)
		// this.getHotGoods(() => uni.stopPullDownRefresh())
		fail:()=>{
		uni.showToast({
			"title": "刷新失败"
		})
		uni.stopPullDownRefresh()
		}
	},
	components: {"goods-list":goodsList},
	onReachBottom() {
		if(this.pageindex>5) return this.flag=true
		this.pageindex++
		this.getHotGoods()
	},
	methods: {
		//获取轮播图
		async getSwipers() {
			// console.log('获取轮播图');
			//   uni.request({
			//   	url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
			//             success:res => {
			// 	console.log(res)
			// 	if(res.statusCode !== 200){
			// 		return uni.showToast({
			// 			title: "获取数据失败"
			// 		})
			// 	}
			// 	this.swipes = res.data.message
			// }
			//   })
			const res = await this.$myRequest({
				url: '/api/public/v1/home/swiperdata'
			});
			// console.log(res.message);
			this.swipes = res.message;
		},
		//获取热门商品数据
		async getHotGoods(callBack){
			const res = await this.$myRequest({
				url: '/api/public/v1/goods/search?pagenum='+this.pageindex
			})
			this.goods=[...this.goods, ...res.message.goods]
			callBack &&callBack() //专门为回调设定的
			console.log(res)
		},
		//导航方法
		navItemClick(url) {
			// console.log(url)
			uni.navigateTo({
				url
			})
		},
		//商品详情
		goGoodsDetail(id){
			console.log(id)
			uni.navigateTo({
				url:'/pages/goods-detail/goods-detail?id='+id
			})
		}
	}
};
</script>

<style lang="scss">
.home {
	.isOver {
		 width: 100%;
		 height: 50px;
		 line-height: 50px;
		 text-align: center;
		 font-size: 28rpx;
	}
	swiper {
		width: 750rpx;
		height: 380rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}
	
	.nav {
		display: flex;
		.nav_item {
			width: 25%;
			text-align: center;
			view {
				width: 120rpx;
				height: 120rpx;
				background: $shop-color;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
			.icon-tupian {
				font-size: 40rpx;
			}
			text {
				font-size: 30rpx;
			}
		}
	}
	.hot_goods {
		background: #eee;
		overflow: hidden;
		margin-top: 10px;
		.tit{
			height: 50px;
			line-height: 50px;
			color: $shop-color;
			text-align: center;
			letter-spacing: 20px;
			background-color: #fff;
			margin: 7px 0;
		}
	}
}
</style>
